<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="关键字搜索">
            <el-input v-model="formInline.KeyWord" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="getSkuList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">新增商品</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table
        :data="PurchaseGetAllSKUList"
        v-loading="skulistLoading"
        element-loading-text="拼命加载中"
        fit
        highlight-current-row
        border
        style="width: 100% "
        :header-cell-style="getRowClass"
      >
        <el-table-column prop="ProductId" label="商品ID" align="center"></el-table-column>
        <el-table-column prop="SupplierId" label="供货商" align="center"></el-table-column>
        <el-table-column prop="SKUBarcode" label="条形码" align="center"></el-table-column>
        <el-table-column prop="OldSKUSupplierId" label="货号" align="center"></el-table-column>
        <el-table-column prop="SKUName" label="名称" align="center"></el-table-column>
        <el-table-column prop="PYCode" label="助记码" align="center"></el-table-column>
        <el-table-column prop="SKUClassId" label="类别" align="center"></el-table-column>
        <el-table-column prop="SKUProperty" label="属性" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.SKUProperty==0">未指定</span>
              <span v-if="scope.row.SKUProperty==1">食品</span>
              <span v-if="scope.row.SKUProperty==2">非食品</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="SKUUnitNo" label="单位" align="center"></el-table-column>
        <el-table-column prop="SKUInPrice" label="进价" align="center"></el-table-column>
        <el-table-column prop="SKUSalePrice" label="销售价" align="center"></el-table-column>
        <el-table-column prop="SKUWholesalePrice" label="批发价" align="center"></el-table-column>
        <el-table-column prop="SKUCombinationPrice" label="折扣价" align="center"></el-table-column>
        <el-table-column prop="SKURegion" label="经营地区" align="center"></el-table-column>
        <el-table-column prop="SKUSaleMode" label="销售模式" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.SKUSaleMode==0">未指定</span>
              <span v-if="scope.row.SKUSaleMode==1">普通</span>
              <span v-if="scope.row.SKUSaleMode==2">电子秤称重</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

            <el-button
              type="danger"
              size="small"
              v-if="scope.row.Status==0"
              v-on:click="jinyong(scope.row.ProductId)"
            >禁用</el-button>
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.Status==1"
              v-on:click="kaishi(scope.row.ProductId)"
            >启用</el-button>
          </template>
        </el-table-column>

        <el-table-column label="商品证书" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="success" @click="handlecertificate(scope.row.ProductId)">查看证书</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排序" align="center" sortable width='100'>
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" size="mini"></el-input>
					</template>
        </el-table-column>-->
      </el-table>

      <!--新增界面-->
      <el-dialog title="新增" :visible.sync="addFormVisible">
        <el-form :model="addForm" label-width="150px" ref="addForm">
          <el-form-item label="供货商" prop="SupplierId">
            <el-select
              v-model="addForm.SupplierId"
              filterable
              placeholder="请选择供货商"
              @change="getSupplierID"
            >
              <el-option
                v-for="item in SupplierList"
                :key="item.SupplierId"
                :label="item.SupplierName"
                :value="item.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="条形码" prop="SKUBarcode">
            <el-input v-model="addForm.SKUBarcode" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="SKUName">
            <el-input v-model="addForm.SKUName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品类别" prop="SKUClassId">
            <el-select
              v-model="addForm.SKUClassId"
              filterable
              placeholder="请选择商品类别"
              @change="getSKUclass"
            >
              <el-option
                v-for="item in SKUClassList"
                :key="item.SKUClassId"
                :label="item.ClassName"
                :value="item.SKUClassId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品属性" prop="SKUProperty">
            <el-select
              v-model="addForm.SKUProperty"
              filterable
              placeholder="请选择商品属性"
              @change="getSKUProperty"
            >
              <el-option
                v-for="item in SKUPropertyList"
                :key="item.SKUProperty"
                :label="item.SKUPropertyName"
                :value="item.SKUProperty"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="SKUUnitNo">
            <el-input v-model="addForm.SKUUnitNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="进价" prop="SKUInPrice">
            <el-input-number
              v-model="addForm.SKUInPrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="销售价格" prop="SKUSalePrice">
            <el-input-number
              v-model="addForm.SKUSalePrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="批发价格" prop="SKUWholesalePrice">
            <el-input-number
              v-model="addForm.SKUWholesalePrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="折扣价格" prop="SKUCombinationPrice">
            <el-input-number
              v-model="addForm.SKUCombinationPrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="经营地区" prop="SKURegion">
            <el-input v-model="addForm.SKURegion" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="销售方式" prop="SKUSaleMode">
            <el-select
              v-model="addForm.SKUSaleMode"
              filterable
              placeholder="请选择销售方式"
              @change="getSKUSaleModeList"
            >
              <el-option
                v-for="item in SKUSaleModeList"
                :key="item.SKUSaleMode"
                :label="item.SKUSaleModeName"
                :value="item.SKUSaleMode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit">提交</el-button>
        </div>
      </el-dialog>

      <!--编辑界面 editFormVisible editForm-->
      <el-dialog title="新增" :visible.sync="editFormVisible">
        <el-form :model="editForm" label-width="150px" ref="editForm">
          <el-form-item label="供货商" prop="SupplierId">
            <el-select
              v-model="editForm.SupplierId"
              filterable
              placeholder="请选择供货商"
              @change="getSupplierID"
            >
              <el-option
                v-for="item in SupplierList"
                :key="item.SupplierId"
                :label="item.SupplierName"
                :value="item.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="条形码" prop="SKUBarcode">
            <el-input v-model="editForm.SKUBarcode" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="SKUName">
            <el-input v-model="editForm.SKUName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品类别" prop="SKUClassId">
            <el-select
              v-model="editForm.SKUClassId"
              filterable
              placeholder="请选择商品类别"
              @change="getSKUclass"
            >
              <el-option
                v-for="item in SKUClassList"
                :key="item.SKUClassId"
                :label="item.ClassName"
                :value="item.SKUClassId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品属性" prop="SKUProperty">
            <el-select
              v-model="editForm.SKUProperty"
              filterable
              placeholder="请选择商品属性"
              @change="getSKUProperty"
            >
              <el-option
                v-for="item in SKUPropertyList"
                :key="item.SKUProperty"
                :label="item.SKUPropertyName"
                :value="item.SKUProperty"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="SKUUnitNo">
            <el-input v-model="editForm.SKUUnitNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="进价" prop="SKUInPrice">
            <el-input-number
              v-model="editForm.SKUInPrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="销售价格" prop="SKUSalePrice">
            <el-input-number
              v-model="editForm.SKUSalePrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="批发价格" prop="SKUWholesalePrice">
            <el-input-number
              v-model="editForm.SKUWholesalePrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="折扣价格" prop="SKUCombinationPrice">
            <el-input-number
              v-model="editForm.SKUCombinationPrice"
              auto-complete="off"
              :precision="3"
              :step="0.1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="经营地区" prop="SKURegion">
            <el-input v-model="editForm.SKURegion" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="销售方式" prop="SKUSaleMode">
            <el-select
              v-model="editForm.SKUSaleMode"
              filterable
              placeholder="请选择销售方式"
              @change="getSKUSaleModeList"
            >
              <el-option
                v-for="item in SKUSaleModeList"
                :key="item.SKUSaleMode"
                :label="item.SKUSaleModeName"
                :value="item.SKUSaleMode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit">提交</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right ;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import {
  PurchaseGetAllSKUList,
  PurchaseAddSKU,
  PurchaseGetSupplierList,
  PurchaseSKUClassList,
  PurchaseSwitchSKU,
  PurchaseUpdateSKU
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      //商品属性
      SKUPropertyList: [
        {
          SKUProperty: 0,
          SKUPropertyName: "未指定"
        },
        {
          SKUProperty: 1,
          SKUPropertyName: "食品"
        },
        {
          SKUProperty: 2,
          SKUPropertyName: "非食品"
        }
      ],

      //销售方式
      SKUSaleModeList: [
        {
          SKUSaleMode: 0,
          SKUSaleModeName: "未指定"
        },
        {
          SKUSaleMode: 1,
          SKUSaleModeName: "普通"
        },
        {
          SKUSaleMode: 2,
          SKUSaleModeName: "电子秤"
        }
      ],
      skulistLoading: false,
      ProductId: "",
      status: -1,
      typeid: 1,
      PurchaseGetAllSKUList: [],
      OderVisible: false,
      editFormVisible: false,
      editForm: {},
      addLoading: false,
      addFormVisible: false,
      addForm: {},
      list: [],
      page: 1,
      pageSize: 20,
      total: 10000000000,
      formInline: {
        SKUId: "",
        SKUName: ""
      },
      SKUClassList: [],
      SupplierList: []
    };
  },
  created() {
    this.getSkuList();
    this.PurchaseGetSupplierList();
    this.PurchaseSKUClassList();
  },
  methods: {
    //获取代理商下拉列表
    PurchaseGetSupplierList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: 20000000
      };
      PurchaseGetSupplierList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("输出代理商下拉列表", vdata);
          self.SupplierList = vdata.DataList;
        }
      });
    },

    PurchaseSKUClassList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: 20000000
      };
      PurchaseSKUClassList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("输出下拉商品类别列表", vdata);
          self.SKUClassList = vdata.DataList;
        }
      });
    },
    //获取商品类型
    // getSKUClass() {
    //   var self = this;
    //   var para = {
    //     sessionid: JSON.parse(localStorage.getItem("userinfo")).SessionId,
    //     page: this.page,
    //     pagesize: this.pageSize,
    //     id: Global.tryGetInt(this.SKUclassId),
    //     name: this.ClassName,
    //     typeid: 0
    //   };
    //   PurchaseGetAllSKUList(para).then(res => {
    //     if (res.data.Status != 1) {
    //       this.$message({
    //         message: res.data.Description,
    //         type: "error"
    //       });
    //       return;
    //     } else {
    //       var vdata = JSON.parse(Base64.decode(res.data.Data));
    //       console.log("获取商品类型");
    //       console.log(vdata);
    //       self.ClassList = vdata.DataList.filter(function(item, index) {
    //         return item.Status == 0;
    //       });
    //       self.total = vdata.TotalCount;
    //     }
    //   });
    // },

    getSKUclass(val) {
      this.editForm.SKUclassId = val;
      console.log(val);
    },
    getSKUSaleModeList(val) {
      this.editForm.SKUSaleMode = val;
      console.log(val);
    },
    getSKUProperty(val) {
      this.editForm.SKUProperty = val;
      console.log(val);
    },
    getSupplierID(val) {
      this.editForm.SupplierId = val;
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#EFEFEF";
      } else {
        return "";
      }
    },
    getSupplierID(val) {
      this.addForm.SupplierId = val;
      console.log(val);
    },

    //获取商品列表
    getSkuList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        KeyWord: this.formInline.KeyWord
      };
      this.skulistLoading = true;
      PurchaseGetAllSKUList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取商品列表", vdata);
          self.PurchaseGetAllSKUList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
        self.skulistLoading = false;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSkuList();
    },
    //添加
    addSubmit() {
      var self = this;
      console.log(this.addForm);
      if (!this.addForm.SupplierId) {
        this.$message({
          message: "请选择供货商",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUBarcode) {
        this.$message({
          message: "商品条形码不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUName) {
        this.$message({
          message: "商品名称不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUClassId) {
        this.$message({
          message: "请选择商品类别",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUProperty) {
        this.$message({
          message: "请选择商品属性",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUUnitNo) {
        this.$message({
          message: "请选择商品单位",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUInPrice) {
        this.$message({
          message: "进价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUSalePrice) {
        this.$message({
          message: "销售价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUWholesalePrice) {
        this.$message({
          message: "批发价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUInPrice) {
        this.$message({
          message: "进价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUCombinationPrice) {
        this.$message({
          message: "折扣价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKURegion) {
        this.$message({
          message: "请选择经营地区",
          type: "error"
        });
        return;
      }
      if (!this.addForm.SKUSaleMode) {
        this.$message({
          message: "请选择销售模式",
          type: "error"
        });
        return;
      }

      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SupplierId: this.addForm.SupplierId,
        SKUBarcode: this.addForm.SKUBarcode,
        SKUName: this.addForm.SKUName,
        SKUClassId: this.addForm.SKUClassId,
        SKUProperty: this.addForm.SKUProperty,
        SKUUnitNo: this.addForm.SKUUnitNo,
        SKUInPrice: this.addForm.SKUInPrice,
        SKUSalePrice: this.addForm.SKUSalePrice,
        SKUWholesalePrice: this.addForm.SKUWholesalePrice,
        SKUCombinationPrice: this.addForm.SKUCombinationPrice,
        SKURegion: this.addForm.SKURegion,
        SKUSaleMode: this.addForm.SKUSaleMode
      };
      console.log("c");
      PurchaseAddSKU(para).then(res => {
        console.log("c2");
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.addFormVisible = false;
          self.getSkuList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
      console.log("c3");
    },

    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        SKUInPrice: 0.01,
        SKUSalePrice: 0.01,
        SKUWholesalePrice: 0.01,
        SKUCombinationPrice: 0.01
      };
    },

    //显示编辑
    handleEdit: function(index, row) {
      var ProductId = row.ProductId;
      console.log(ProductId, "商品id");
      this.editForm.ProductId = ProductId;
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
      console.log("++++++++", this.editForm);
    },
    //编辑提交
    editSubmit() {
      var self = this;
      console.log(this.editForm);
      if (!this.editForm.SupplierId) {
        this.$message({
          message: "请选择供货商",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUBarcode) {
        this.$message({
          message: "商品条形码不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUName) {
        this.$message({
          message: "商品名称不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUClassId) {
        this.$message({
          message: "请选择商品类别",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUProperty) {
        this.$message({
          message: "请选择商品属性",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUUnitNo) {
        this.$message({
          message: "请选择商品单位",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUInPrice) {
        this.$message({
          message: "进价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUSalePrice) {
        this.$message({
          message: "销售价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUWholesalePrice) {
        this.$message({
          message: "批发价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUInPrice) {
        this.$message({
          message: "进价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUCombinationPrice) {
        this.$message({
          message: "折扣价不能为空",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKURegion) {
        this.$message({
          message: "请选择经营地区",
          type: "error"
        });
        return;
      }
      if (!this.editForm.SKUSaleMode) {
        this.$message({
          message: "请选择销售模式",
          type: "error"
        });
        return;
      }

      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        ProductId: this.editForm.ProductId,
        SupplierId: this.editForm.SupplierId,
        SKUBarcode: this.editForm.SKUBarcode,
        SKUName: this.editForm.SKUName,
        SKUClassId: this.editForm.SKUClassId,
        SKUProperty: this.editForm.SKUProperty,
        SKUUnitNo: this.editForm.SKUUnitNo,
        SKUInPrice: this.editForm.SKUInPrice,
        SKUSalePrice: this.editForm.SKUSalePrice,
        SKUWholesalePrice: this.editForm.SKUWholesalePrice,
        SKUCombinationPrice: this.editForm.SKUCombinationPrice,
        SKURegion: this.editForm.SKURegion,
        SKUSaleMode: this.editForm.SKUSaleMode
      };
      console.log("c");
      PurchaseUpdateSKU(para).then(res => {
        console.log("c2");
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.editFormVisible = false;
          self.getSkuList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
      console.log("c3");
    },
    //禁用
    jinyong(ProductId) {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        ProductId: ProductId,
        status: 1
      };
      this.skulistLoading = true;
      PurchaseSwitchSKU(para).then(res => {
        console.log(res);
        if (res.Status == 1) {
          self.total = res.Data.TotalCount;
        }
        self.skulistLoading = false;
        self.getSkuList();
      });
    },
    //启用
    kaishi(ProductId) {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        ProductId: ProductId,
        status: 0
      };
      this.skulistLoading = true;
      PurchaseSwitchSKU(para).then(res => {
        console.log(res);
        if (res.Status == 1) {
          self.total = res.Data.TotalCount;
        }
        self.skulistLoading = false;
        self.getSkuList();
      });
    },
        //跳转到新页面
    handlecertificate(ProductId) {
      console.log(ProductId);
      this.$router.push({
        path: "/Class/certificate",
        query: {
          ProductId: ProductId
        }
      });
    },
  }
};
</script>

<style>
</style>